<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box" name="hello" age="567" li="junfeng" red="#f00">
    你好
  </div>
  <input type="text" id="myipu" name="888">
  <img id="myimg" />
  <script>
    // 属性分为自带属性  id class type  checked  name  src style   href alt,width,heigth,value  等
    // 自定义属性
    // 设置元素的属性的方法
    var box = document.getElementById("box")
    // 1.设置自带属性   元素.属性="值"    元素.属性  
    box.nextElementSibling.nextElementSibling.src = "./1.png"
    box.nextElementSibling.nextElementSibling.myname = "bug图"
    var inp = box.nextElementSibling;
    console.log(inp.type)
    console.log(inp.id)
    inp.name = ""; //删除自带属性
    //2. 设置属性  box.setAttribute 可以设置自带属性和自定义属性
    box.setAttribute("mynum", "999")
    //3. 获取属性 getAttribute 可以获取自带属性和自定义属性
    var age = box.getAttribute("age");
    var boxid = box.getAttribute("id");
    console.log(age)
    console.log(boxid)
    //4. obj.removeAttribute();//删除属性 可以删除自带属性和自定义属性
    box.removeAttribute("li")
    //5.	obj.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
    if (box.hasAttribute("red")) {
      box.style.color = "red"
    }
    // 6 添加移除class 
    box.className = "mybox"
    box.className = ""
  </script>
</body>

</html>